<script setup lang="ts">
import { useNavigation } from '@/hooks/navigation'
import { TITLE } from '@/utils/bootstrap/provide'

import CategoryItem from '@/views/informations/components/categoryItem.vue'

import { ElSkeleton, ElSkeletonItem } from 'element-plus'
import { inject, onUnmounted, ref, watch, watchEffect } from 'vue'
import { useI18n } from 'vue-i18n'
import { useRoute } from 'vue-router'
import { useCategory } from './hooks'

const titleInject = inject(TITLE)
const { t } = useI18n()
const { params } = useRoute()
const route = useRoute()
const tag = ref(params.tag)
const { categories, documents } = useCategory(tag)
const { openRemotePage } = useNavigation()
watch(route, (val) => {
  tag.value = val.params.tag
})

onUnmounted(() => {
  titleInject?.setTitle('')
})
watchEffect(() => {
  if (categories.value?.Data?.Name) {
    titleInject?.setTitle(categories.value?.Data?.Name)
  }
})
</script>

<template>
  <div class="root py30">
    <!-- 频道 banner -->
    <ElSkeleton class="m" :loading="!categories?.Data?.CoverImg" animated>
      <template #template>
        <div class="rd-8 bg-white p10">
          <ElSkeletonItem
            variant="image"
            class="rd-8"
            style="height: 130px"
          />
        </div>
      </template>
      <template #default>
        <div v-if="categories?.Data?.CoverImg" class="w">
          <div
            class="banner fx-cc rd-8"
            :class="{ pointer: categories?.Data?.CoverUrl }"
            :style="{
              background: `url(${categories?.Data?.CoverImg}) center center / cover no-repeat`,
            }"
            @click="openRemotePage(categories?.Data?.CoverUrl)"
          >
            {{ categories?.Data?.CoverTitle }}
          </div>
        </div>
      </template>
    </ElSkeleton>
    <!-- 栏目 -->
    <ElSkeleton class="w text-gray" :loading="!documents" animated :count="3">
      <template #template="{ key }">
        <div
          v-if="key === 1 && params.tag === t('zz频道短标识.宫观查询')"
          class="h5:hide mt30 rd-8 bg-white p20"
        >
          <div class="fx-j-sb mb20">
            <ElSkeletonItem variant="h3" class="h30 w10%" />
            <ElSkeletonItem variant="h3" class="h30 w10%" />
          </div>
          <div class="fx gap25">
            <div class="fx1">
              <ElSkeletonItem variant="image" class="h100% w100% rd-8" />
            </div>
            <div class="fx1">
              <div
                v-for="item in 4"
                :key="item"
                class="fx gap10"
                :class="{ mb20: item !== 4 }"
              >
                <ElSkeletonItem variant="image" class="h60 w100 rd-8" />
                <div class="fx1 pt10">
                  <ElSkeletonItem variant="h3" class="mb6 w60%" />
                  <ElSkeletonItem variant="h3" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="h5:hide mt30 rd-8 bg-white p20">
          <div class="fx-j-sb mb20">
            <ElSkeletonItem variant="h3" class="h30 w10%" />
            <ElSkeletonItem variant="h3" class="h30 w10%" />
          </div>
          <div class="list">
            <div class="item">
              <ElSkeletonItem
                variant="image"
                style="height: 222px"
                class="rd-8"
              />
              <ElSkeletonItem variant="h3" class="my10 w80%" />
              <ElSkeletonItem variant="h3" />
            </div>
            <div class="item">
              <ElSkeletonItem
                variant="image"
                style="height: 222px"
                class="rd-8"
              />
              <ElSkeletonItem variant="h3" class="my10 w80%" />
              <ElSkeletonItem variant="h3" />
            </div>
            <div class="item">
              <ElSkeletonItem
                variant="image"
                style="height: 222px"
                class="rd-8"
              />
              <ElSkeletonItem variant="h3" class="my10 w80%" />
              <ElSkeletonItem variant="h3" />
            </div>
          </div>
        </div>
        <div class="web:hide mt30 rd-8 bg-white p20">
          <div class="fx-j-sb mb20">
            <ElSkeletonItem variant="h3" class="h30 w10%" />
            <ElSkeletonItem variant="h3" class="h30 w10%" />
          </div>
          <div class="list">
            <div class="item">
              <ElSkeletonItem
                variant="image"
                style="height: 222px"
                class="rd-8"
              />
              <ElSkeletonItem variant="h3" class="my10 w80%" />
              <ElSkeletonItem variant="h3" />
            </div>
          </div>
        </div>
      </template>
      <template #default>
        <ul>
          <li v-for="(item, index) in categories?.Items" :key="index">
            <CategoryItem
              :column="index === 0 ? 2 : 3"
              :tag="params.tag"
              :data="documents?.[index]"
              :more-path="{
                path: `/informations/${params.tag}/${item.Data.id}`,
                query: { title: item.Data.Name },
              }"
            />
          </li>
        </ul>
      </template>
    </ElSkeleton>
  </div>
</template>

<style lang="scss" scoped>
.root {
  .banner {
    height: 130px;
    font-size: clamp(20px, 3vw, 3vw);
    color: #fff;
    font-weight: 600;
  }
  .list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    .item {
      flex: 1;
      // max-width: calc((100% - 24px) / 3);
      img {
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
        aspect-ratio: 366 / 222;
      }
    }
  }
}
</style>
